<template>
  <div class="particle-container">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvas = ref(null)
let animationId = null
let particles = []

class Particle {
  constructor(canvas) {
    this.canvas = canvas
    this.reset()
  }

  reset() {
    this.x = Math.random() * this.canvas.width
    this.y = Math.random() * this.canvas.height
    this.size = Math.random() * 2 + 0.5
    this.speedX = Math.random() * 0.5 - 0.25
    this.speedY = Math.random() * 0.5 - 0.25
    this.opacity = Math.random() * 0.5 + 0.2
  }

  update() {
    this.x += this.speedX
    this.y += this.speedY

    if (this.x > this.canvas.width || this.x < 0 || 
        this.y > this.canvas.height || this.y < 0) {
      this.reset()
    }
  }

  draw(ctx) {
    ctx.save()
    ctx.globalAlpha = this.opacity
    ctx.fillStyle = '#6366f1'
    ctx.shadowBlur = 10
    ctx.shadowColor = '#6366f1'
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
    ctx.fill()
    ctx.restore()
  }
}

onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  canvas.value.width = window.innerWidth
  canvas.value.height = window.innerHeight

  // 创建粒子
  const particleCount = Math.floor((canvas.value.width * canvas.value.height) / 15000)
  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle(canvas.value))
  }

  const animate = () => {
    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)

    // 绘制连接线
    particles.forEach((particle, i) => {
      particle.update()
      particle.draw(ctx)

      // 连接附近的粒子 - 优化：只连接后续粒子避免重复
      for (let j = i + 1; j < particles.length; j++) {
        const dx = particles[j].x - particle.x
        const dy = particles[j].y - particle.y
        const distance = Math.sqrt(dx * dx + dy * dy)

        if (distance < 120) {
          ctx.save()
          ctx.globalAlpha = (1 - distance / 120) * 0.3
          ctx.strokeStyle = '#6366f1'
          ctx.lineWidth = 0.5
          ctx.beginPath()
          ctx.moveTo(particle.x, particle.y)
          ctx.lineTo(particles[j].x, particles[j].y)
          ctx.stroke()
          ctx.restore()
        }
      }
    })

    animationId = requestAnimationFrame(animate)
  }

  animate()

  // 处理窗口大小变化 - 优化：添加防抖
  let resizeTimeout
  const handleResize = () => {
    clearTimeout(resizeTimeout)
    resizeTimeout = setTimeout(() => {
      if (!canvas.value) return
      
      canvas.value.width = window.innerWidth
      canvas.value.height = window.innerHeight
      
      // 优化：根据新的画布大小调整粒子数量，而不是完全重建
      const newCount = Math.floor((canvas.value.width * canvas.value.height) / 15000)
      const currentCount = particles.length
      
      if (newCount > currentCount) {
        // 添加新粒子
        for (let i = 0; i < newCount - currentCount; i++) {
          particles.push(new Particle(canvas.value))
        }
      } else if (newCount < currentCount) {
        // 移除多余粒子
        particles.splice(newCount)
      }
      
      // 更新现有粒子的画布引用
      particles.forEach(p => p.canvas = canvas.value)
    }, 150)
  }

  window.addEventListener('resize', handleResize)

  onUnmounted(() => {
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
    window.removeEventListener('resize', handleResize)
    clearTimeout(resizeTimeout)
  })
})
</script>

<style scoped>
.particle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>

